﻿
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">
    <link rel="stylesheet" href="layui/css/layui.css" tppabs="https://www.layui.site/layui/dist/css/layui.css"  media="all">

    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <title>Dream游戏商城-游戏搜索</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="assets/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="assets/css/plugins.css" rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="assets/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>

    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
       #gameitem img{
           width: 80%;
           height: 80%;
       }
       
       h1 {
           padding-top: 10px;
           font-size: 36px;
           color: white;
           padding: 0px;
           margin: 0px;
           line-height: 100px;
           text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
           width: 310px;
           text-align: center;
           /*float: left;*/
       }
       
       /*   #type{
              vertical-align: middle;
       
              width: 100%;
          }*/
       .box-container {
           color: white;
           float: left;
           margin-left: 10%;
           width: 80%;
           margin-top: 2%;
           height: 80%;
       
       }
       
       .box {
           color: white;
           float: left;
           margin-top: 2% ;
           margin-left: 2.5%;
           width: 30%;
           height: 30%;
       }
       #gamepage{
       	text-align: center;
       	margin:0 auto;
       }
       #gameitem{
       	text-align: center;
       }
       body{
       	background-color: #3B4348;
       }
       #logo{
       	background-color: #000000;
       }
       #page{
       	text-align: center;
       }

    </style>
</head>

<body>


<!--== Start Header Section ==-->
<header id="header-area">
    <!-- Start PreHeader Area -->
    <div class="preheader-area">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-lg-6">
                    <div class="preheader-contact-info d-flex align-items-center justify-content-between justify-content-md-start">
                        <div class="single-contact-info">
                            <span class="contact-icon">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <a href="mailto:your@example.com" class="contact-text">
                                <strong>Email:</strong> Dream@email.here
                                    </a>
                                </div>
                                <div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                    <a href="" class="contact-text">
                                        <strong>电话:</strong> (+86) 188-8888-8888
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-md-7 col-lg-6 mt-xs-10">
                    <div class="site-setting-menu">
                        <ul class="nav justify-content-center justify-content-md-end">
                            <li><a href="my-account.html">个人中心</a></li>
                            <li><a href="order.html">查看订单</a></li>
                            <li><a  id="logout" href="#" >注销登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End PreHeader Area -->

    <!-- Start Header Middle Area -->
    <div class="header-middle-area">
        <div class="container">
            <div class="row">
                <!-- Logo Area Start -->
                <div class="col-4 col-md-2 col-xl-3 m-auto text-center text-lg-left">
                    <a href="index.html" class="logo-wrap d-block">
                        <img src="assets/img/logo.png" alt="Logo" class="img-fluid"/>
                    </a>
                </div>
                <!-- Logo Area End -->

                <!-- 查询模块开始 -->
                <div class="col-8 col-md-7 col- m-auto ">
                    <div class="search-box-wrap">
                        <form class="search-form d-flex">
                            <input id="keywords" type="search" name="search"  placeholder="搜索游戏"/>
                            <button id="btnsearch" type="button" class="btn btn-search"><img src="assets/img/icons/icon-search.png" alt="Search Icon"/>
                            </button>
                        </form>
                    </div>
                </div>
                <!-- 查询模块结束 -->


            </div>
        </div>
    </div>
    <!-- End Header Middle Area -->

    <!-- 分类模块开始 -->
    <div class="navigation-area" id="fixheader">
        <div class="container">
            <div class="row">
                <!-- Categories List Start -->
                <div class="col-10 col-lg-3">
                    <div class="categories-list-wrap">
                        <button class="btn btn-category d-none d-lg-inline-block"><i class="fa fa-bars"></i> 分类
                        </button>
                        <ul class="category-list-menu">


                            <li class="category-item-parent dropdown-show">
                                <a href="#" class="category-item arrow-toggle">
                                    <img src="assets/img/icons/games.png" alt="Mobile"/>
                                    <span>游戏分类</span>
                                </a>
                                <ul id="gametype" class="mega-menu-wrap dropdown-nav">

                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 分类模块结束 -->


                <!-- Main Menu Start -->
                <div class="col-2 col-lg-9 d-none d-lg-block">
                    <div class="main-menu-wrap">
                        <nav class="mainmenu">
                            <ul class="main-navbar clearfix">
                                <li class="dropdown-show"><a href="index.html"
                                                             class="">首页</a>
                                    <ul  class="dropdown-nav sub-dropdown">

                                    </ul>
                                </li>
                                <li><a href="about.html">关于我们</a></li>


                                <li class="dropdown-show"><a href="#" class="arrow-toggle">页面</a>
                                    <ul class="dropdown-nav">
                                        <li><a href="shoppingcart.html">购物车</a></li>
                                        <li><a href="my-account.html">个人中心</a></li>
                                    </ul></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- Main Menu End -->
            </div>
        </div>
    </div>
    <!-- End Main Menu Area -->
</header>
<!--== End Header Section ==-->

<!--== Start Page Breadcrumb ==-->
<div class="page-breadcrumb-wrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-breadcrumb">
                    <ul class="nav">
                        <li><a href="sts">首页</a></li>
                        <li><a id="gametitle" class="active"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Page Breadcrumb ==-->


<div id="type"></div>
<!--== Page Content Wrapper Start ==-->
<div id="page-content-wrapper">
    <div class="container">
        <!-- About Page Content Start -->

        <div  class="input-group input-group-lg">
            <div class="input-group-btn">
            </div>
        </div>

        <div class="row">
            <!-- About Text Start -->


            <div class="col-lg-6 order-last order-lg-first">



            </div>


            <div id="gameitem" class="box-container">

            </div>


            <div id="gamepage"></div>
        </div>
    </div>
    <!-- About Page Content End -->
</div>
</div>
<!--== Page Content Wrapper End ==-->

<!-- Start Sale Feature Products -->

<!-- End Sale Feature Products -->

<!--== Start Brand Carousel Area ==-->
<div class="brand-logo-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="brand-logo-carousel owl-carousel" id="logo">
                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="assets/img/logo-1.png" alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->

                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="assets/img/logo-2.png" alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->

                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="assets/img/logo-3.png" alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->

                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="assets/img/logo-4.png" alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->

                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="assets/img/logo-5.png" alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->

                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="assets/img/logo-6.png" alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Brand Carousel Area ==-->

<!--== Start Call To Action ==-->
<section id="call-to-action">
    <div class="container">
        <div class="call-to-action-content">
            <div class="row">
                <!-- Single Call to Action Start -->
                <div class="col-lg-3 col-sm-6 m-auto">
                    <div class="single-action-item d-flex align-items-center">
                        <div class="call-action-icon">
                            <i class="fa fa-truck"></i>
                        </div>
                        <div class="call-action-info">
                            <h4>快速发货</h4>
                            <p>秒到库存</p>
                        </div>
                    </div>
                </div>
                <!-- Single Call to Action End -->

                <!-- Single Call to Action Start -->
                <div class="col-lg-3 col-sm-6">
                    <div class="single-action-item d-flex align-items-center">
                        <div class="call-action-icon">
                            <i class="fa fa-support"></i>
                        </div>
                        <div class="call-action-info">
                            <h4>绝对安全可靠</h4>
                            <p>值得信赖</p>
                        </div>
                    </div>
                </div>
                <!-- Single Call to Action End -->

                <!-- Single Call to Action Start -->
                <div class="col-lg-3 col-sm-6">
                    <div class="single-action-item d-flex align-items-center">
                        <div class="call-action-icon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <div class="call-action-info">
                            <h4>新品更新</h4>
                            <p>随时查看</p>
                        </div>
                    </div>
                </div>
                <!-- Single Call to Action End -->

                <!-- Single Call to Action Start -->
                <div class="col-lg-3 col-sm-6">
                    <div class="single-action-item d-flex align-items-center">
                        <div class="call-action-icon">
                            <i class="fa fa-refresh"></i>
                        </div>
                        <div class="call-action-info">
                            <h4>游玩2小时内无理由退货</h4>
                            <p>信誉保证</p>
                        </div>
                    </div>
                </div>
                <!-- Single Call to Action End -->
            </div>
        </div>
    </div>
</section>
<!--== End Call To Action ==-->


<!--== Start Footer Area ==-->
<footer id="footer-area">
    <!-- Footer Widget Area Start -->
    <div class="footer-widget-area">
        <div class="container">
            <div class="footer-widget-content">
                <div class="row">

                    <!-- Single Widget-item Start -->
                    <div class="col-lg-3 col-sm-6">
                        <div class="single-widget-item">
                            <h3 class="widget-title">Dream&Game</h3>
                            <div class="widget-body">
                                <div class="contact-info">
                                    <div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-home"></i>
                                    </span>
                                        <a href="mailto:your@example.com" class="contact-text">
                                            <strong>地址:</strong> 中国, 福建, 厦门
                                        </a>
                                    </div>
                                    <div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                        <a href="mailto:your@example.com" class="contact-text">
                                            <strong>电话:</strong> (+86) 188-8888-8888
                                        </a>
                                    </div>
                                    <div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-envelope"></i>
                                    </span>
                                        <a href="mailto:your@example.com" class="contact-text">
                                            <strong>Email:</strong> Dream@email.here
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Single Widget-item End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Widget Area End -->

    <!-- Footer Bottom Area -->
    <div class="footer-bttom-area">
        <div class="container">
            <div class="row">
                <!-- Copyright Text Area -->
                <div class="col-md-6 m-auto text-center text-md-left order-last order-md-first">
                    <p>版权所有 &copy; 2022.Dream游戏商城 保留所有权利。</a></p>
                </div>
                <!-- Copyright Text Area -->

                <!-- Payment Method Area -->
                <div class="col-md-6 m-auto text-center text-md-right">
                    <div class="payment-support">
                        <img src="assets/img/payment.png" alt="Payment" class="d-inline-block" />
                    </div>
                </div>
                <!-- Payment Method Area -->
            </div>
        </div>
    </div>
    <!-- Footer Bottom Area -->
</footer>

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->

<!--== Product Quick View Modal Area Wrap ==-->
<div class="modal" id="quickView" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"><img src="assets/img/icons/cancel.png" alt="Close" class="img-fluid" /></span>
            </button>
            <div class="modal-body">
                <div class="quick-view-content single-product-page-content">
                    <div class="row">
                        <!-- Product Thumbnail Start -->
                        <div class="col-lg-5 col-md-6">
                            <div class="product-thumbnail-wrap">
                                <div class="product-thumb-carousel owl-carousel">
                                    <div class="single-thumb-item">
                                        <a href="single-product.html"><img class="img-fluid" src="assets/img/single-pro-1.jpg" alt="Product" /></a>
                                    </div>

                                    <div class="single-thumb-item">
                                        <a href="single-product.html"><img class="img-fluid" src="assets/img/single-pro-2.jpg" alt="Product" /></a>
                                    </div>

                                    <div class="single-thumb-item">
                                        <a href="single-product.html"><img class="img-fluid" src="assets/img/single-pro-3.jpg" alt="Product" /></a>
                                    </div>

                                    <div class="single-thumb-item">
                                        <a href="single-product.html"><img class="img-fluid" src="assets/img/single-pro-4.jpg" alt="Product" /></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Product Thumbnail End -->

                        <!-- Product Details Start -->
                        <div class="col-lg-7 col-md-6 mt-5 mt-md-0">
                            <div class="product-details">
                                <h2><a href="single-product.html">Crown Summit Backpack</a></h2>

                                <div class="rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>

                                <span class="price">$52.00</span>

                                <div class="product-info-stock-sku">
                                    <span class="product-stock-status text-success">In Stock</span>
                                    <span class="product-sku-status ml-5"><strong>SKU</strong> MH03</span>
                                </div>

                                <p class="products-desc">Ideal for cold-weathered training worked lorem ipsum outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, reprehenderit.</p>
                                <div class="shopping-option-item">
                                    <h4>Color</h4>
                                    <ul class="color-option-select d-flex">
                                        <li class="color-item black">
                                            <div class="color-hvr">
                                                <span class="color-fill"></span>
                                                <span class="color-name">Black</span>
                                            </div>
                                        </li>

                                        <li class="color-item green">
                                            <div class="color-hvr">
                                                <span class="color-fill"></span>
                                                <span class="color-name">green</span>
                                            </div>
                                        </li>

                                        <li class="color-item orange">
                                            <div class="color-hvr">
                                                <span class="color-fill"></span>
                                                <span class="color-name">Orange</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="product-quantity d-flex align-items-center">
                                    <div class="quantity-field">
                                        <label for="qty">Qty</label>
                                        <input type="number" id="qty" min="1" max="100" value="1" />
                                    </div>

                                    <a href="shoppingcart.html" class="btn">Add to Cart</a>
                                </div>
                            </div>
                        </div>
                        <!-- Product Details End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== Product Quick View Modal Area End ==-->
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
    $(document).ready(function() {


        getGameData();

        getTypeName();

        getTypes();

        $("#btnsearch").click(function(){
            getGameData();
        });




        //添加进入购物车的方法
        $(document).on("click",'[name="addTocart"]', function () {


            $.ajax({
                url:"http://localhost:8080/dreamgame/shopping/add/"+$(this).val(),

                async:true,

                dataType:"json",

                type:"post",

                success:(r)=>{
                    alert(r.msg);

                }
            })

        });


        var total = 0;
        var tpageNo = 1;
        var tpageSize = 10;
        //获取游戏数据的方法
        function getGameData(pageNo,pageSize) {
            if(!pageNo){
                pageNo =1;
            }
            if(!pageSize){
                pageSize = 10;
            }
           // console.log("keywords:"+$("#keywords").val());

            $.ajax({
                url:"http://localhost:8080/dreamgame/game/page?keywords="+$("#keywords").val()+"&pageNo="+pageNo+"&pageSize="+pageSize,

                async:true,

                dataType:"json",

                type:"get",

                success:(r)=>{
                    total = r.data.total;
                    tpageNo = r.data.pageNo;
                    tpageSize = r.data.pageSize;
                    //清除原来表格中的数据
                    $("#gameitem").children().remove();

                    let list=r.data.data;
                    console.log("r："+list);
                    for (let g of list) {
                        console.log("g："+g);

                        let str  =`<div class="box">
                            <img src="http://rjgs8gsgn.hn-bkt.clouddn.com/${g.game_img}" alt="">
                                <div class="content">
                                    <div class="price"><span>${g.game_name}</span></div>
                                     <div class="stars">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                     <i class="far fa-star"></i>
                                    </div>
                                    <div class="price">售价:<span> ${g.price} </span></div>
                                    <button name="addTocart" value="${g.game_id}" class="btn btn-round btn-cart"><i class="fa fa-shopping-cart"></i></button>
                                </div>
                        </div>`;

                        console.log(str);
                        // $("#gametab tbody").append(str);
                        $("#gameitem").append(str);

                    }
                    resolvepage();
                }
            })
        }


        //获取类型名
        function getTypeName() {
            $.ajax({
                url:"http://localhost:8080/dreamgame/gametype/gettypename",

                async:true,

                dataType:"json",

                type:"get",

                success:(r)=>{
                    let typename=r.data;
                    $("#gametitle").append(`${r.data}区`);
                }
            })
        }



        function  resolvepage(){
            // layui.use两个参数
            layui.use(['laypage', 'layer'], function(){
                // laypage 变量引用 layui.laypage
                var laypage = layui.laypage
                    ,layer = layui.layer;

                // console.log("resolvepage: "+total);
                //完整功能
                laypage.render({
                    elem: 'gamepage'
                    ,curr: tpageNo
                    ,limit: tpageSize
                    ,count: total
                    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                    ,jump: function(obj,first){
                        //当前页码
                        // console.log(obj.curr);
                        //每页记录数
                        // console.log(obj.limit);
                        //跳页的时候
                        if(!first) {
                            getGameData(obj.curr, obj.limit);
                        }

                    }
                });

            });
        }


        //分类
        $(document).on("click",".mega-item-title", function()  {
            let typeid=$(this).attr("value");
            // console.log(typeid);

            $.ajax({

                url: "http://localhost:8080/dreamgame/gametype/type/" +typeid,

                async: true,

                dataType: "json",

                type: "get",

                success: (r) => {
                    window.location.href = "game.html";
                }

            })

        })



        //获取游戏类型的方法
        function getTypes() {
            $.ajax({
                url:"http://localhost:8080/dreamgame/gametype/gettypes",

                async:true,

                dataType:"json",

                type:"get",

                success:(r)=>{

                    let list=r.data;

                    for (let t of list) {

                        // console.log(t);

                        let str=`<li class="mega-menu-item">
                        <a href="#" value="${t.typeid}" class="mega-item-title">${t.typename}</a>
                        </li>`;

                        // console.log(str);
                        $("#gametype").append(str);

                    }

                }
            })
        }


    })

</script>

<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="assets/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="assets/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="assets/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="assets/js/plugins.js"></script>

<!--=== Active Js ===-->
<script src="assets/js/active.js"></script>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- custom js file link  -->
<script src="js/script.js"></script>
<script>
    $("#logout").click(function logout() {
        // console.log("调用登出方法");
        $.ajax({
            url: "http://localhost:8080/dreamgame/user/loginout",
            async: true,
            dataType: "json",
            type: "post",
            success: (r) => {
                alert(r.msg);
                window.location.href = "login.html";
            }
        })
    });
</script>
</body>
</html>
